<template>
  <div :class="className" :style="{height:height,width:width,top:top}" />
</template>

<script>
import * as echarts from 'echarts' // echarts theme
import drawMixin from "@/utils/drawMixin";
// import {getEnterCredit} from "@/api/enterCredit"

//授信笔数
const animationDuration = 7000

export default {
  mixins: [drawMixin],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    top: {
      type: String,
      default: '5%'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '100%'
    }
  },

  data () {
    return {
      chart: null,
      chartTimer: null,
      chartData: {
        months: ["2022-07","2022-08","2022-09","2022-10","2022-11","2022-12","2023-01","2023-02","2023-03","2023-04","2023-05","2023-06"],
        creditCnt: [111580,103541,104209,116478,116846,125037,135910,121019,127572,134328,137211,91612],
        bondCnt: [692,532,558,554,789,575,543,554,542,406,337,303]
      },
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.initChart()
    })

    this.getChartData()
  },
  beforeDestroy () {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
    clearInterval(this.chartTimer);
  },

  methods: {
    initChart () {
      this.chart = echarts.init(this.$el, 'macarons')
      this.setOptions(this.chartData)
    },

    getChartData() {
      this.chartTimer = setInterval(() => {

        // getEnterCredit().then(response => {
        //   this.chartData.months = response.months;
        //   this.chartData.creditCnt = response.creditCnt;
        //   this.chartData.bondCnt = response.bondCnt;
        // });
        this.setOptions(this.chartData)
      }, 60 * 1000)
    },

    // getOptions() {
    //   this.chartTimer = setInterval(() => {
    //     this.setOptions(this.chartData)
    //   }, 3600 * 1000)
    // },

    setOptions ({ months, creditCnt , bondCnt} = {}) {
      this.chart.clear()
      this.chart.setOption({
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     // Use axis to trigger tooltip
        //     type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
        //   }
        // },
        // legend: {},
        animationDuration: animationDuration,
        animationDurationUpdate: animationDuration,
        tooltip: {
          show: true,
          trigger: 'item',
          formatter: '{a} <br/><br/> {b} : {c}',
          extraCssText:'width: 512px; height: 100px;font-size: 36px; font-family: Arial;font-weight: bold;',
          textStyle: {
            fontStyle: 'normal',
            fontWeight: 'normal',
            fontFamily: 'sans-serif',
            color: '#000',
            fontsize: 60
          }
        },
        grid: {
          left: '5%',
          right: '5%',
          top: '10%',
          bottom: '10%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          data: months
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '授信笔数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              color: '#000'
            },
            emphasis: {
              focus: 'series'
            },
            data: creditCnt,
            smooth: true,
            valueAnimation: true,
            barWidth: 60,
            // barGap: 10,
            itemStyle: {
              emphasis: {
                barBorderRadius: 0,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#cbf800" },
                  { offset: 1, color: "rgba(4,248,228,0.75)" },
                ]),
              },
            }
          },
          {
            name: '发债笔数',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: bondCnt,
            smooth: true,
            valueAnimation: true,
            barWidth: 60,
            // barGap: 10,
            itemStyle: {
              emphasis: {
                barBorderRadius: 0,
              },
              //颜色样式部分
              normal: {
                barBorderRadius: 10,
                color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                  { offset: 0, color: "#5bb822" },
                  { offset: 1, color: "#9ef552" },
                ]),
              },
            }
          }
        ]
      })
    }
  }
}
</script>
